<template>
  <!--
    动态绑定 class，当 isActive 为 true 时添加 'is-active' 类
    点击时触发 toggleClick 方法
  -->
  <div
    :class="{ 'is-active': props.isActive }"
    @click="toggleClick"
  >
    <!-- 假设你已经配置好了 SvgIcon 全局组件 -->
    <svg-icon
      name="hamburger"
      width="20"
      height="20"
    />
  </div>
</template>

<script setup lang="ts">
// --- 1. 定义 Props ---
// withDefaults 和 defineProps 结合使用，为 props 提供类型和默认值
const props = withDefaults(defineProps<{
  isActive?: boolean
}>(), {
  isActive: false,
})

// --- 2. 定义 Emits ---
// 定义组件可以发出的事件
const emit = defineEmits<{
  (e: 'toggleClick'): void
}>()

// --- 3. 定义方法 ---
// 点击事件的处理函数
const toggleClick = () => {
  // 使用 emit 函数向父组件发送 'toggleClick' 事件
  emit('toggleClick')
}
</script>

<style lang="scss" scoped>
/* 样式部分无需任何改动，可以直接复用 */
.svg-icon {
  vertical-align: middle;
}

.is-active {
  transform: rotate(180deg);
}
</style>
